<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
得分：<span>0</span>
</body>
<script type="text/javascript">
var str = 'abcdefghijklmnopqrstuvwxyz';
var s;
var div;
function createDiv(){
    s = str[parseInt(Math.random()*str.length)];
    div = document.createElement("div");
    div.innerText = s;
    div.style.width = '30px';
    div.style.height = '30px';
    div.style.backgroundColor = 'red';
    div.style.borderRadius = '50%';
    div.style.textAlign = 'center';
    div.style.lineHeight = '30px';
    div.style.fontWeight = 'bold';
    div.style.color = '#fff';
    div.style.position = 'absolute';
    var maxWidth = document.documentElement.clientWidth - 30;
    div.style.left = Math.random()*maxWidth + 'px';
    document.body.appendChild(div);
}
createDiv();
var speed = 3;
setInterval(function(){
    var t = div.offsetTop;
    t += 3;
    // console.log(t,document.documentElement.clientHeight);
    if(t>document.documentElement.clientHeight){
        document.body.removeChild(div);
        createDiv();
        t=0;
    }
    div.style.top = t + "px";
},30);
var score = 0;
document.onkeypress=function(e){
    var e = e || window.event;
    if(e.keyCode == s.charCodeAt(0)){
        score++;
        document.querySelector("span").innerText = score;
        document.body.removeChild(div);
        createDiv();
    }
}

</script>
</html>